
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getAllRefusedUsersReq } from '/@/api/approval'
import { sexEnum } from '/@/enums/sexEnum'

const loading = ref(false)

const searchFormRef = ref();
const searchForm = reactive({
  userName: '',
  phone: '',
  email: '',
});
const searchFormActions = {
  ok() {
    pgActions.reset();
    tableActions.getList();
  },
  reset() {
    searchFormRef.value.resetFields();
    searchFormActions.ok();
  },
}

const pg = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const pgActions = {
  reset() {
    pg.current = 1;
    pg.size = 10;
    pg.total = 0;
  },
  currentChange(c) {
    pg.current = c;
    tableActions.getList();
  }
}

const table = reactive({
  data: []
})
const tableActions = {
  async getList() {
    let params = {
      startIndex: pg.current,
      pageSize: pg.size,
      mobile: searchForm.phone,
      username: searchForm.userName,
      email: searchForm.email,
    };
    loading.value = true;
    let { data, respCode } = await getAllRefusedUsersReq(params);
    loading.value = false;
    if (respCode === 200) {
      table.data = data.list;
      pg.total = data.total;
    }
  }
}

tableActions.getList();


</script>

<template>
  <div class="p-4 user-approved">
    <div class="searchBox mb-4 px-4 pt-4">
      <el-form :model="searchForm" ref="searchFormRef" inline :label-width="60">
        <el-form-item prop='userName' label="用户名">
          <el-input v-model="searchForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop='phone' label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item prop='email' label="邮箱">
          <el-input v-model="searchForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="searchFormActions.ok">查询</el-button>
          <el-button @click="searchFormActions.reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-content p-4">
      <el-table class="mb-4" v-loading="loading"  :data="table.data" row-key="userId">
        <el-table-column type="selection" width="55" fixed />
        <el-table-column prop="username" label="用户名" :width="150" fixed></el-table-column>
        <el-table-column prop="sex" label="性别" :width="90">
          <template #default="scope">{{ sexEnum[scope.row.sex] }}</template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" :width="220"></el-table-column>
        <el-table-column prop="email" label="邮箱" :width="220"></el-table-column>
        <el-table-column prop="reason" label="原因" :width="220"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" :width="220"></el-table-column>
        <el-table-column prop="updateDate" label="更新时间" :width="220"></el-table-column>
        <el-table-column prop="roleCode" label="备注" ></el-table-column>
      </el-table>
      <el-pagination class="flex justify-end" background layout="prev, pager, next" :total="pg.total"
        :current-page="pg.current" :page-size="pg.size" @current-change="pgActions.currentChange"></el-pagination>
    </div>
  </div>
</template>

<style lang="less" scoped>
html[data-theme='light'] {
  .searchBox {
    background-color: #fff;
  }

  .middle-content {
    background-color: #fff;
  }
}

html[data-theme='dark'] {
  .searchBox {
    background-color: #000;
  }

  .middle-content {
    background-color: #000;
  }
}

.user-approved {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .searchBox {
    margin-bottom: 20px;
    padding: 10px 10px 0;
  }

  .middle-content {
    flex: 1;
  }

  :deep(.ant-table-thead > tr > th) {
    font-weight: bold;
  }

  :deep(.ant-table-selection-column) {
    padding: 0;
    width: 20px !important;
  }

  :deep(.ant-card-body) {
    padding: 10px 15px;
  }

  :deep(.ant-table-tbody > tr > td) {
    padding: 15px;
  }

  //调整head行属性
  :deep(.ant-table-thead > tr > th) {
    padding: 15px;
  }

  :deep(.ant-form-item) {
    margin-bottom: 10px !important;
  }

  .ant-modal-close-x {
    width: 55px;
    line-height: 45px;
    height: 45px;
  }
}
</style>
